function HtmlDivOutput(output_el) {
	Mojo.Log.info('setting up HtmlDiv');
	
	this.screenMode = 2; /* 2 - loRes, 1 - hiRes */
    this.xsize = 64;
	this.ysize = 32;
	this.erasing = {};
	
	this.container = output_el;
	var base_d = document.createElement('div');
	base_d.style.width = "2px";
	base_d.style.height = "2px";
	base_d.style.backgroundColor = "white";
	base_d.style['float'] = "left";
	output_el.style.width = "256px";
	output_el.style.height= "128px";
	output_el.style.border = "1px solid #AAA";
	for(var y = 0; y<64; y++) {
		for (var x = 0; x < 128; x++) {
			var d = base_d.cloneNode(false);
			d.set = 0;

			output_el.appendChild(d);
		}
	}
	Mojo.Log.info('created HtmlDiv, appending to',output_el);
	
	this.erase_delay = 0;
	this.screenClear();
	
	Mojo.Log.info('HtmlDiv set up');
}
HtmlDivOutput.prototype.screenBufferToggle = function(x, y, inbit){
	x %= this.xsize;
    y %= this.ysize;
    var key = x.toString() + y.toString();
    var pixels = this.container.childNodes;
	
    var position = y * this.xsize + x + 1;
    
	var bit = inbit;
	if (bit === undefined) {
		bit = pixels[position].set ? 0 : 1;
	}
    pixels[position].set = bit;
    this.erasing[key] = 0;
    
    if (!bit) {
        this.erasing[key] = 1;
		if (this.erase_delay) {
            erasetimer = setTimeout((function(){
                if (this.erasing[key]) {
                    this.erasing[key] = 1;
                    pixels[position].style.backgroundColor = "white";
                }
                
            }).bind(this), this.erase_delay);
        } else {
            pixels[position].style.backgroundColor = "white";
        }
        
    } else {
        
        pixels[position].style.backgroundColor = "black";
    }
    return (bit);
}

HtmlDivOutput.prototype.screenClear = function(){
	
	var cn = this.container.childNodes;
	Mojo.Log.info('clearing',cn);
	Mojo.Log.info('length',cn.length);
	for(var i = 1; i<this.xsize*this.ysize+1; i++) {
		cn[i].style.width = "4px";
		cn[i].style.height = "4px";
		cn[i].style.display = "block";
		cn[i].style.backgroundColor = "white";
	}
	for(var i = this.xsize*this.ysize+1; i < cn.length; i++) {
		cn[i].style.display = "none";
	}
	
}


HtmlDivOutput.prototype.putSprite = function(x, y, sprite_bytes){

	
	var unset = 0;
    var context = this.context;
    //Mojo.Log.info('scale:',scale);
    //Mojo.Log.info('drawing sprite at',x,y);
    for (var row = 0; row < sprite_bytes.length; row++) {
        var sprite_byte = sprite_bytes[row];
        //Mojo.Log.info("putting row",x,y+row,sprite_byte);
        
        for (var i = 7; i >= 0; i--) {
			var bit = sprite_byte & 1;
			sprite_byte >>= 1;
			
			if (bit) {
				var result = this.screenBufferToggle(x + i, y + row);
				if (result === 0) {
					unset = 1;
				}
			}
			
			
		//Mojo.Log.info('fillRect',x,i,xmod,scale,((x+i)%xmod)*scale,y+row*scale);
		
		}
    }
    
    
    return unset;
}


HtmlDivOutput.prototype.drawBuffer = function() {
	
	var ctx = this.context;
    for (var y = 0; y < this.ysize; y++) {
        for (var x = 0; x < this.xsize; x++) {
			var bit = this.screenBuffer[y][x];
            ctx.fillStyle = bit ? "#000" : "#FFF";
            ctx.fillRect(x,y,1,1);
        }
    }
	
	
}

HtmlDivOutput.prototype.scrollDown = function(n){
	var start = new Date().getTime();
    for (var y = this.ysize - 1 - n; y >= 0; y--) {
        for (var x = 0; x < this.xsize; x++) {
            var bit = this.screenBuffer[y][x];
			if (y < n) {
				this.screenBufferToggle(x, y, 0);
			}
			this.screenBufferToggle(x, y + n, bit);   
        }
    }
	$('state').innerHTML = new Date().getTime() - start+'ms';
}


HtmlDivOutput.prototype.scrollLeft = function(n){

}
HtmlDivOutput.prototype.scrollRight = function(n){

}
HtmlDivOutput.prototype.loRes = function(n){
	this.screenMode = 2; /* 2 - loRes, 1 - hiRes */
    this.xsize = 64;
	this.ysize = 32;
	this.HtmlDiv_scale = 4;
	$('chip48screen').remove();
	this.HtmlDiv = document.createElement('HtmlDiv');
	this.HtmlDiv.id = "chip48screen";
	$('HtmlDiv_spot').appendChild(this.HtmlDiv);
	this.context = this.HtmlDiv.getContext('2d');
	this.context.scale(4,4);
	
}

HtmlDivOutput.prototype.hiRes = function(n){
	Mojo.Log.info('setting hires');
	this.screenMode = 1;
	this.xsize = 128;
	this.ysize = 64;
	this.HtmlDiv_scale = 2;
	$('chip48screen').remove();
	this.HtmlDiv = document.createElement('HtmlDiv');
	this.HtmlDiv.id = "chip48screen";
	$('HtmlDiv_spot').appendChild(this.HtmlDiv);
	this.context = this.HtmlDiv.getContext('2d');
	this.context.scale(2,2);
	
	
}
